<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
	<div th:replace="~{commons/template::style}"></div>
	<title>账户管理</title>
</head>
<body>
<div th:replace="~{commons/template::head}"></div>

<div class="container-fluid">
	<div class="row">
		<div th:replace="~{commons/template::leftSide(active='account')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>账户管理</h2>

			<div class="table-responsive" th:fragment="detail">
				<table class="table table-striped table-sm">
					<form class="form-inline" th:action="@{/selectUser}">
					<div class="row">
						<div class="col-md-4"></div>
						<div class="col-md-3">
								<div class="form-group">
									<input type="text" name="searchName" class="form-control" id="searchName" placeholder="用户名">
								</div>
						</div>
						<div class="col-md-2">
							<input type="submit" value="查询" class="btn btn-primary">
						</div>
						<div class="col-md-3"></div>
					</div>
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-6">
								<tr>
									<td align="center">用户ID</td>
									<td align="center">用户名</td>
									<td align="center">注册时间</td>
									<td align="center">角色/权限</td>
									<td align="center">用户状态</td>
									<td align="center">功能</td>
								</tr>
						</div>
					</div>
						<div class="row">  <!--  内容  -->
							<div class="col-md-3"></div>
							<div class="col-md-6">
								<tbody id="t1">
								<tr th:each="user:${pageInfo.getList()}">
									<td align="center" th:text="${user.getUserId()}"></td>
									<td align="center" th:text="${user.getUsername()}"></td>
									<td align="center" th:text="${#dates.format(user.getRegisterTime(), 'yyyy年MM月dd日 HH:mm:ss')}"></td>
									<td align="center" th:text="${user.getRoleName()}"></td>
									<td align="center" th:text="${user.getUserState()==0?'已启用':'已禁用'}"></td>
									<td align="center">
										<a  th:href="@{/userState/0/}+${user.getUserId()}">
										<input type="button" class="btn btn-success" value="启用" th:if="${user.getUserState()}>0">
										</a>
										<a  th:href="@{/userState/1/}+${user.getUserId()}">
										<input type="button" class="btn btn-danger" value="禁用" th:if="${user.getUserState()}==0">
										</a>
											<input type="button" class="btn btn-warning" value="重置密码" th:name="${user.getUserId()}">
										    <button type="button" class="btn btn-info" th:name="${user.getUserId()}" th:value="allot">分配角色</button>
									</td>
								</tr>
								</tbody>
							</div>
						</div>
						<div class="row">
							<div class="col-md-3"></div>
							<div class="col-md-1"><button id="prePage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getPrePage()}]])">上一页</button></div>
							<div class="col-md-1">当前第：<a name="pageNum" id="pageNum" th:text="${pageInfo.getPageNum()}"></a>页</div>
							<div class="col-md-1">总共：<a name="pages" id="pages" th:text="${pageInfo.getPages()}"></a>页</div>
							<div class="col-md-1">共：<a name="total" id="total" th:text="${pageInfo.getTotal()}"></a>条记录</div>
							<div class="col-md-1">
								<select name="pageSize" id="pageSize" onchange="changePage(1)" class="form-control-sm">
									<option value="5" th:selected="${pageInfo.getPageSize()==5}">每页5条</option>
									<option value="10" th:selected="${pageInfo.getPageSize()==10}">每页10条</option>
									<option value="15" th:selected="${pageInfo.getPageSize()==15}">每页15条</option>
									<option value="20" th:selected="${pageInfo.getPageSize()==20}">每页20条</option>
								</select>
							</div>
							<div class="col-md-1">
								<button id="nextPage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getNextPage()}]])">下一页</button>
							</div>
							<div class="col-md-3"></div>
						</div>
						</form>
				</table>
			</div>
		</main>
	</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form id="form">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">分配角色</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body" id="content">
					<tr>
						<td>
							<span id="userIdName">用户ID：</span>
							<input id="userId" type="text" placeholder="用户ID" name="userId" readonly>
						</td>
					</tr>
					<tr>
						<td align="center">
							<div id="roleId" onchange="refreshBtn()">

							</div>
						</td>
					</tr>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
					<button type="button" class="btn btn-primary" id="save" onclick="sav()">保存</button>
				</div>
			</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div th:replace="~{commons/template::script}"></div>
</body>
<script>
$("#t1").on("click","input[value='重置密码']",function (){
	let id = this.name;
	$.ajax({
		url: "resetPwd",
		data: {userId:id},
		type: "get",
		dataType: "json",
		success:function (returnData) {
			alert(returnData.message)
			}
	})
})
$("#t1").on("click","button[value='allot']",function (){
	let id = this.name;
	$("#userId").val(id);
	$.ajax({
		url:"selectAllRoles",
		data:{},
		type:"get",
		dataType:"json",
		async:false,
		success:function (returnData) {
			$("#roleId").html("")
			for (var i=0;i<returnData.length;i++){
				$("#roleId").append("<input type='checkbox' value='"+returnData[i].roleId+"'>"+returnData[i].roleName+"&nbsp&nbsp");
			}
		}
	})
	$.ajax({
		url:"getUserRoles",
		data:{userId:id},
		type:"get",
		dataType:"json",
		success:function (data) {
			for (var i = 0;i<data.length;i++){
				$("#roleId").find("input[value='"+data[i].roleId+"']").attr("checked","checked");
			}
		}
	})
	$("#myModal").modal('show');
})
function changePage(page) {
	$.ajax({
		url: "selectUser",
		data: {searchName:$("#searchName").val(),pageNum:page,pageSize:$("#pageSize").val()},
		type: "get",
		dataType: "json"
	})
}
function sav() {
	let roleArr;
	$.each($(":input[type='checkbox']:checked"),function(){
		console.log("你选了："+$(":input[type='checkbox']:checked").length+"个，其中有："+$(this).val());
		roleArr += $(this).val();
		roleArr += ",";
	});
	$.ajax({
		url:"insertUserRoles",
		data:{roleId:roleArr,userId:$("#userId").val()},
		dataType:"json",
		type:"get",
		success:function (message){
			alert(message.message)
			if (message.state) {
				window.location.href = "http://localhost:8080/selectUser";
			}else {
				$("#save").attr("disabled","disabled");
			}
		}
	})
}
function refreshBtn() {
	$("#save").removeAttr("disabled");
}
</script>
</html>